<template>
  <div>
    <!-- <div class="header"> -->
      <van-nav-bar
        title="人工上报市容顽症事件"
        left-text=""
        left-arrow
        :fixed="true"
        @click-left="onClickLeft"
      />
    <!-- </div> -->
       <div class="title">事件详情单</div>
      <div class="desc">
        <i></i>
        <span>{{ state }}</span>
      </div>
      <van-cell-group>
        <van-cell title="事件类型" :value="lists.eventType" />
      </van-cell-group>

      <van-cell-group>
        <van-cell title="发生时间" :value="lists.createTime" />
      </van-cell-group>
      <van-cell-group>
        <van-cell title="发现方式" :value="lists.region" />
      </van-cell-group>

      <van-cell-group>
        <van-cell title="事件地址" :value="lists.eventAddr" />
      </van-cell-group>

      <van-cell-group>
        <van-cell title="所属网格" :value="lists.ownerGrid" />
      </van-cell-group>
      <!-- <van-cell-group>
        <van-cell title="AI照片" icon="photo-o" />
        <div
          class="vimg"
          v-for="(item, index) in lists.picAi"
          :key="index"
          @click="vimghandle(item)"
        >
          <van-image width="100" height="100" :src="item" />
        </div>
      </van-cell-group> -->
      <van-cell-group>
        <van-cell title="现场照片" icon="photo-o" />
        <div
          class="vimg"
          v-for="(item, index) in lists.imageUrls"
          :key="index"
          @click="vimghandle(item)"
        >
          <van-image width="100" height="100" :src="item.url" />
        </div>
      </van-cell-group>
      <div class="goindex">
        <van-button
          class="goindex-back"
          round
          type="info"
          color="#F57665"
          block
          @click="goindexhandleBack"
          >取消</van-button
        >
        <van-button
          class="goindex-back"
          round
          type="primary"
          block
          @click="Dialog"
          >处置结案</van-button
        >
        <van-button
          class="goindex-back"
          round
          type="primary"
          color="#FFC000"
          block
          @click="goindexhandlePeo"
          >事件到人</van-button
        >
      </div>
      <div class="fullimg" v-show="fullimgshow" @click="fullimghandle">
        <img :src="fullimgurl" />
      </div>
  </div>
</template>



<script>
import { Toast } from 'vant';
import { workUpdate,sendCardMsg,personLoad} from '../../../../utils/api'
export default {
  name: "dumpedProReport",
  data() {
    return {
      lists:{},
      state:"",
      fullimgshow: false,
      fullimgurl: "",
    };
  },
  mounted() {
    let that = this;
    if(that.$route.params){
      let param = that.$route.params.detail.id;
      personLoad({id:param}).then((res)=>{
        if(res.code === 200){
          that.lists = res.data;
          that.state = that.lists.eventStatus == 0 ? '事件待处理' :(that.lists.eventStatus == 1 ? '事件到人' : that.lists.eventStatus == 2 ? '事件到人待结案' :'事件待处理');
          that.lists.eventType = that.lists.eventType == 0 ? '建筑垃圾偷倒' : (that.lists.eventType == 1 ? '小包垃圾丢弃' : '垃圾溢满');
          that.lists['region'] = '人工上报';
          that.lists.imageUrls =  eval("(" +  that.lists.imageUrls  + ")" );
        }
      })
    }
  },
  methods: {
    onClickLeft() {
        this.$router.push({ name: "garbageDumped" });
    },
    typeSelect(value) {
      this.lists.typevalue = value.name;
      this.lists.typeshow = false;
    },
    gridSelect(value) {
      this.lists.gridvalue = value.name;
      this.lists.gridshow = false;
    },
    timeConfirm(date) {
      this.lists.currentDate = `${date.getFullYear()}-${
        date.getMonth() + 1
      }-${date.getDate()}`;
      this.timeshow = false;
    },

    goindexhandleBack() {
      this.$router.push({ path: "/" });
    },
    vimghandle(item) {
      this.fullimgshow = true;
      this.fullimgurl = item;
    },
    fullimghandle() {
      this.fullimgshow = false;
    },
    Dialog(){
      const that = this
      that.$dialog.confirm({
        // title: '标题',
        message: '是否对该事件进行结案处理',
      })
      .then(() => {
        that.lists.eventStatus = 3;
        that.finishCase(that.lists.id,that.lists.eventStatus);
        that.$router.push({ name: "dumpedProCase",params:{lists:that.lists}});
        // on confirm
      })
      .catch(() => {
        // on cancel
      });
    },
    //事件到人
    goindexhandlePeo(){
      let evenTile = this.lists.eventType;
      let regions = this.lists.region == '人工上报'?'person':'ai';
      this.lists.eventStatus = '1';
      this.finishCase(this.lists.id,this.lists.eventStatus);
      let descriptions = '发现时间:'+ this.lists.createTime +'<br>事件地址:'+this.lists.eventAddr +'<br>事件方式:'+this.lists.region;
       let Url = 'http://211.136.107.159:8081/lxm_app/'
      let params = {
        textCard:{
          title:evenTile+'事件监管到人，请录入信息',
          description:descriptions,
          url:Url+'m_index.html#/workingEventsMain/messageCard/chengguanEvents?id='+ this.lists.id +'&region='+ regions +''
        },
        ownerGrid:this.lists.ownerGrid
        // ownerGrid:'0702'
      }
      sendCardMsg(params).then((res)=>{
        if(res.code === 200){
          Toast.success(res.message)
          this.$router.push({ name: "eventsToPersonPeo",params:{lists:this.lists}});
        }else{
          Toast.fail(res.message)
        }
      })
    },
    //处置结案
    finishCase(id,state){
      let param = {
          id:id,
          eventStatus:state
        }
      workUpdate(param).then((res)=>{
        if(res.code === 200){
          Toast.success(res.message)
        }else{
          Toast.fail(res.message)
        }
      })
    }
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.title {
  width: 100%;
  height: 35px;
  line-height: 35px;
  background: #daf4f1;
  color: #04bfac;
  font-weight: bold;
  text-align: center;
  margin-top: 11%;
}
#gdmap {
  width: 100%;
  height: 400px;
}
.uploadbox {
  padding: 10px 20px;
  box-sizing: border-box;
}
.goindex {
  width: 90%;
  margin: 20px auto;
  display: flex;
  justify-content: space-between;
}
.vimg {
  padding: 3px 0px;
  margin-left: 10px;
  box-sizing: border-box;
  display: inline-block;
}
.fullimg {
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background: rgba(0, 0, 0, 0.9);
  z-index: 1;
}
.fullimg img {
  width: 100%;
  object-fit: contain;
  height: 100%;
}
.desc {
  width: 100%;
  height: 35px;
  color: #ff8f43;
  line-height: 35px;
  font-weight: bold;
  font-size: 16px;
}
.desc i {
  width: 10px;
  height: 10px;
  background: #ff8f43;
  border-radius: 50%;
  float: left;
  margin: 11px 10px 0px 20px;
}
.goindex-back{
  width: 30%;
}
</style>
